<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{:t('会员')}关系图</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  {include file="public/css"/}
	<style>
	.orderdetail{background:#fff;width: 94%;box-sizing:border-box;margin:0 10px;display:flex;flex-direction:column;}
	.orderdetail *{box-sizing:border-box;}
	.orderinfo{ width:100%;margin-top:5px;padding: 5px;background: #FFF;}
	.orderinfo .item{display:flex;width:100%;padding:5px 0;border-bottom:1px dashed #ededed;}
	.orderinfo .item:last-child{ border-bottom: 0;}
	.orderinfo .item .t1{width:100px;}
	.orderinfo .item .t2{flex:1;text-align:right}
	.orderinfo .item .red{color:red}
	</style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card layui-col-md12">
          <div class="layui-card-header">{:t('会员')}关系图
						{if input('param.isopen')==1}<i class="layui-icon layui-icon-close" style="font-size:18px;font-weight:bold;cursor:pointer" onclick="closeself()"></i>{/if}
					</div>
          <div class="layui-card-body" pad15>
						<div class="layui-form layui-col-md9">
							<div class="layui-inline layuiadmin-input-useradmin">
								<label class="layui-form-label" style="width:60px">{:t('会员')}ID：</label>
								<div class="layui-input-block" style="width:140px;margin-left:90px">
									<input type="text" name="mid" value="{$Request.param.mid}" autocomplete="off" class="layui-input" placeholder="输入{:t('会员')}ID查看">
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="LAY-app-forumreply-search">查看</button>{if $member['pid']}<button class="layui-btn layui-btn-primary layuiadmin-btn-list" onclick="location.href='{:url('charts')}/mid/{$member.pid}{if input('param.isopen')==1}/isopen/1{/if}'">上一层</button>{/if}
								{if $deeplevel >= 10}<button class="layui-btn layui-btn-primary layuiadmin-btn-list" id="jiazaimore">加载更多</button>{/if}
							</div>
						</div>
						<div class="layui-col-md12" id="guanxitu" style="height:{if $deeplevel > 4}{$deeplevel*150}px{else}600px{/if}">
							
						</div>
          </div>
        </div>
    </div>
  </div>
	{include file="public/js"/}
	<script src="__STATIC__/admin/js/echarts5.5.1.min.js?v=1109"></script>
	<script>
	layui.form.on('submit(LAY-app-forumreply-search)', function(obj){
		var field = obj.field
		location.href = "{:url('charts')}/mid/" + field.mid + "{if input('param.isopen')==1}/isopen/1{/if}";
	})
	{if $member}
	var dom = document.getElementById("guanxitu");
	var myChart = echarts.init(dom);

	var option = {
			tooltip: {
				show:false,
					trigger: 'item',
					triggerOn: 'mousemove'
			},
			series:[
					{
							type: 'tree',
							data: [{:jsonEncode($member)}],
							left: '2%',
							merge:true,
							right: '2%',
							top: '8%',
							bottom: '20%',
							symbol:function(value,params){
								if(params.data.headimg){
									return 'image://'+params.data.headimg
								}else{
									return 'emptyCircle';
								}

							},//emptyCircle
							symbolSize:40,
							orient: 'vertical',
							expandAndCollapse: true,
							roam:true,
							label: {
									position: 'top',
									//rotate: -90,
									verticalAlign: 'middle',
									align: 'middle',
									fontSize:12,
									offset:[0,-10]
							},
							leaves: {
									label: {
											position: 'bottom',
											//rotate: -90,
											verticalAlign: 'middle',
											align: 'middle',
											offset:[0,10]
									}
							},
							animationDurationUpdate: 750,
							initialTreeDepth:-1
					}
			]
		};
	
		myChart.setOption(option,true);
	{/if}

	var deeplevel = "<?php echo $deeplevel; ?>";

	function appendNewDataToBottom(data) {  
	  // 辅助函数用于查找名为 "Member M" 的节点并在其 children 中追加新数据  
	  function findAndAppend(node) {  
	    if (node.children && node.children.length > 0) {  
	      for (var i = 0; i < node.children.length; i++) { 
	      	if(node.children[i] && node.children[i].id > 0){
	      		// 继续递归查找  
	          findAndAppend(node.children[i]);  
	      	}
	      }  
	    }else{
	    	if(node.deeplevel >= deeplevel){
	    		$.ajax({
					type:'POST',
					url:"{:url('chartsMore')}",
					dataType:'json',
					data:{mid:node.id},
					success:function(info){
						node.children = [];
						node.children = info; 
						// 更新树形图数据  
						  option.series[0].data = [data]; // 重新设置树形图的根数据  
						  // 渲染更新后的树形图  
						  myChart.setOption(option, true);  
					},
					error:function(){
						dialog('未知错误',0);
					}
				})
	    	}
	    }  
	  }  
	  
	  // 调用辅助函数查找并追加新数据  
	  findAndAppend(data);  

	 //  setTimeout(updatainfo, 3000);
	 //   function updatainfo() {
	 //  	// 更新树形图数据  
		//   option.series[0].data = [data]; // 重新设置树形图的根数据  
		//   // 渲染更新后的树形图  
		//   myChart.setOption(option, true);  
		// }
	  
	}  

	// 加载更多
	$("#jiazaimore").click(function(){
		// 调用递归函数查找要操作的节点并追加新数据  
		appendNewDataToBottom({:jsonEncode($member,true)});  
	})

	</script>
	{include file="public/copyright"/}
</body>
</html>